<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8">
		<title>小程序详情</title>
		<!--<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
		<meta name="description" content="">
		<meta name="HandheldFriendly" content="True">
		<meta name="MobileOptimized" content="750">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black"><!--新增-->
		<meta http-equiv="content-type" content="no-transform" />
		<meta name="viewport" content="width=319.9,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" media="(device-height: 568px)"><!--新增-->
		<meta name="viewport" content="width=320,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no"><!--新增-->
		<meta name="format-detection" content="telephone=no" /><!--IOS禁止电话号码变色-->
		<!-- <link rel="stylesheet" href="static/mobile/css/mui.min.css"> -->
		<link rel="stylesheet" href="static/mobile/css/details.css">
		<link rel="stylesheet" href="static/mobile/css/touchTouch.css">
		<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
		<!-- <script type="text/javascript" src="static/mobile/js/mui.min.js"></script> -->
		<script type="text/javascript" src="static/mobile/js/touchTouch.jquery.js"></script>
	</head>

	<body>
		<header class="header">
			<div class="back-icon" onclick="history.go(-1);"><i></i></div>
			<div class="logo"><img src="static/mobile/img/logo.png"></div>
			<div class="search-icon"></div>
		</header>
		<div class="content">
			<ul>
				<li>
					<div class="left">
						<img src="uploadFiles/uploadImgs/mobile/${pd.PROD_ICON }" />
						<div class="comment-label">
							<h5 class="content-title">${pd.PROD_NAME}</h5>
							<div class="index-star-level">
								<c:choose>
										<c:when test="${pd.STAR == '5'}">
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
										</c:when>
										<c:when test="${pd.STAR == '4'}">
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item grey"></span>
										</c:when>
										<c:when test="${pd.STAR == '3'}">
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
										</c:when>
										<c:when test="${pd.STAR == '2'}">
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
										</c:when>
										<c:when test="${pd.STAR == '1'}">
												<span class="miniapp-tag-item red"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
										</c:when>
										<c:otherwise>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
												<span class="miniapp-tag-item grey"></span>
										</c:otherwise>
									</c:choose>
							</div>
							<div class="miniapp-header-tag">
			        			<c:choose>
									<c:when test="${fn:length(pd.LABELS_ARR) <= 3}">
					        			<c:forEach items="${pd.LABELS_ARR}" var="item" varStatus="vs">
					        				<span class="miniapp-tag-item">${item.LABLE_NAME }</span>
					        			</c:forEach>
									</c:when>
									<c:otherwise>
					        			<c:forEach items="${pd.LABELS_ARR}" begin="0" end="2" var="item" varStatus="vs">
					        			<span class="miniapp-tag-item">${item.LABLE_NAME }</span>
					        			</c:forEach>
					        			 <i class="miniapp-tag-item-i"></i>
									</c:otherwise>
								</c:choose>
							</div>
						</div>
					</div>
					<!--<a class="right">
						打开体验
					</a>-->
				</li>
			</ul>
			<div class="details-pic ">
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				    <div class="mui-scroll" id="thumbs">
			            <c:forEach var="var" items="${varlist}" varStatus="vs">
							<c:if test="${vs.index le 3 }">
								<a href="uploadFiles/uploadImgs/mobile/${var}">
									<img src="uploadFiles/uploadImgs/mobile/${var}" />
								</a>
							</c:if>
						</c:forEach>
					</div>
				</div>
			</div>
			<div class="brief-introduction">
				<h4 class="title">简介</h4>
				<p class="author">作者：<span>${pd.AUTHOR }</span></p>
				<p class="describe">描述：<span>${pd.PROD_DESC }</span></p>
			</div>
			<div class="scan">
				<h4 class="go-mini-apps">进入小程序</h4>
				
				<style>
				.nullmpcode{ font-size: 24px; text-align: center; margin: 15px 0; color:#444444;}
				.nullmpcode-text{ font-size: 16px; text-align: center;color:#6EB8EE}
				</style>
				
				<c:if test="${empty pd.MP_CODE_ICON }">
					<p class="nullmpcode" class="">${pd.PROD_NAME}</p>
					<p class="nullmpcode-text">长按复制名称到微信小程序进行搜索</p>
				</c:if>
				
				
				<c:if test="${!empty pd.MP_CODE_ICON }">
					<img src="uploadFiles/uploadImgs/mobile/${pd.MP_CODE_ICON}">
					<p class="hint">长按进入公众号，可直接使用小程序</p>
				</c:if>
				
				
			</div>
		</div>
		<script>
			$(function(){
				$('#thumbs a').touchTouch();
			});
		</script>
		
		<iframe id="stat" style="display:none" src="static/weixin/ymstat.jsp"></iframe>
	</body>

</html>